<template>
    <div class="ls-goods">
        <div class="ls-goods__top ls-card">
            <el-alert
                title="温馨提示：1.管理分销商的身份，每个分销商可以同时拥有多个身份，享受不同权益"
                type="info"
                show-icon
                :closable="false"
            >
            </el-alert>
        </div>

        <div class="m-t-24 ls-card">
            <div class="m-b-24">
                <el-button
                    type="primary"
                    size="mini"
                    @click="$router.push('/distribution/distribution_identity_edit?mode=add&flag=0')"
                    >新增分销身份
                </el-button>
            </div>

            <MyTable ref="my_table" :columns="columns" :list-api="tableListApi">
                <template v-slot:poster="{ row }">
                    <div class="flex">
                        <el-image :src="row.poster" style="width: 34px; height: 34px"></el-image>
                    </div>
                </template>
            </MyTable>

            <div class="m-t-24 flex row-right">
                <ls-pagination v-model="pager" @change="getDistributionData()"></ls-pagination>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Ref,
    Vue
} from 'vue-property-decorator'

import {
    apiDistributionIdentityDel,
    apiDistributionIdentityLists
} from '@/api/distribution/distribution'
import LsDialog from '@/components/ls-dialog.vue'
import LsPagination from '@/components/ls-pagination.vue'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import { RequestPaging } from '@/utils/util'

@Component({
    components: {
        LsPagination,
        LsDialog,
        MyTable,
        MyDrawer
    }
})
export default class DistributionGoods extends Vue {
    @Ref() readonly my_table!: MyTable
    /** S Data **/

    pager = new RequestPaging()

    tableListApi: any = apiDistributionIdentityLists

    columns = [
        {
            prop: 'name',
            label: '身份名称',
            width: 180,
        },
        {
            prop: 'remark',
            label: '描述',
            width: 180,
        },
        {
            prop: 'member_num',
            label: '拥有会员数',
            width: 180,
        },
        {
            prop: 'operation',
            label: '操作',
            width: 180,
            operation: [
                { name: '详情', type: 'text', clickFun: this.onPreviewHandler },
                { name: '编辑', type: 'text', clickFun: this.onEditHandler },
                { name: '删除', type: 'text', clickFun: this.onDelHandler  },
            ]
        }
    ]

    /** E Data **/

    /** S Method **/

    // 获取分销列表
    getDistributionData(): void {
        this.pager.request({
            callback: apiDistributionIdentityLists,
            params: {}
        })
    }
    onPreviewHandler(row: any) {

    }
    onEditHandler(row: any) {

    }

    onDelHandler(row: {id: string}) {
        const id = row.id
        apiDistributionIdentityDel({ id }).then(() => {
            this.getDistributionData()
        })
    }

    /** E Method **/

    created() {
        this.getDistributionData()
        // this.getGoodsOtherList();
    }
}
</script>

<style lang="scss" scoped>
.ls-goods {
    &__top {
        padding-bottom: 6px;
    }
    .goods-search {
        .ls-input-price {
            width: 180px;
        }
    }
    .ls-goods__content {
        padding-top: 0;
    }
}
</style>
